<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*定义关键帧*/
        @keyframes myAnimation {
            0% {opacity: 0}
            100% {opacity: 1}
        }

        .box {
            font-size: 28px;
            animation: myAnimation 3s;  /*指定关键帧动画及完成时间*/
        }

        @keyframes example-animation {
            0%{
                background-color: red;
                transform: scale(1);
            }
            50%{
                background-color: blue;
                transform: scale(1.5);
            }
            100%{
                background-color: red;
                transform: scale(1);
            }
        }

        .box2 {
            width: 100px;
            height: 100px;
            margin: 0 auto;
            background-color: red;

            /*animation-name: example-animation;  !*关键帧动画的名字*!*/
            /*animation-duration: 2s; !*完成关键帧动画的时间*!*/
            /*animation-timing-function: ease-in-out;  !*控制动画的加速度*!*/
            /*animation-delay: 0s;  !*动画的延迟时间*!*/
            /*animation-iteration-count: infinite; !*动画重复播放的次数*!*/
            /*animation-direction: alternate; !*动画播放的方向*!*/

            /*可以使用组合写法(考虑兼容性问题)*/
            -webkit-animation: example-animation 2s ease-in-out infinite;
            -o-animation: example-animation 2s ease-in-out infinite;
            animation: example-animation 2s ease-in-out infinite;
        }
    
    </style>
</head>
<body>
    <h1>CSS关键帧动画</h1>
    <ol>
        <li>定义关键帧【@keyframes 名字{}】: 即动画过程中不同时间点的样式变化</li>
        <li>应用动画：在需要动画效果的元素上使用animation来应用关键帧动画</li>
    </ol>

    <div class="box">
        测试效果区域
    </div>

    <div class="box2"></div>
</body>
</html>